<template>
  <div class="role">
    <page-search
      :searchFormConfig="searchFormConfig"
      @searchBtnClick="hanldeSearchBtnClick"
      @resetBtnClick="hanldeResetBtnClick"
    ></page-search>
    <page-content
      ref="pageContentRef"
      :contentTableConfig="contentTableConfig"
      pageName="role"
      @newBtnClick="handleNewData"
      @handleEditorRow="handleEditorRow"
    ></page-content>
    <page-modal
      ref="pageModalRef"
      :modalConfig="modalConfig"
      :modalInfo="modalInfo"
      :otherInfo="otherInfo"
      pageName="role"
    >
      <div class="tree">
        <el-tree
          ref="elTreeRef"
          :data="entireMenus"
          show-checkbox
          node-key="id"
          :props="{ label: 'name', children: 'children' }"
          @check="handleCheckChange"
        />
      </div>
    </page-modal>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, nextTick } from "vue";
import { useStore } from "@/store";
import { menuMapLeaFKeys } from "@/utils/map-menu";

import PageSearch from "@/components/page-search";
import pageContent from "@/components/page-content";
import PageModal from "@/components/page-modal";

import { ElTree } from "element-plus";
import { usePageSearch } from "@/hooks/usePageSearch";
import { usePageModal } from "@/hooks/usePageModal";

import { searchFormConfig } from "./config/search.config";
import { modalConfig } from "./config/modal.config";
import { contentTableConfig } from "./config/role.config";

export default defineComponent({
  components: {
    pageContent,
    PageSearch,
    PageModal,
  },
  setup() {
    const store = useStore();
    // const [pageContentRef, hanldeSearchBtnClick, hanldeResetBtnClick] =
    //   usePageSearch();
    const elTreeRef = ref<InstanceType<typeof ElTree>>();
    const editCallback = (item: any) => {
      nextTick(() => {
        // 设置 tree 节点选中
        const menuList = menuMapLeaFKeys(item.menuList);
        elTreeRef.value?.setCheckedKeys(menuList, false);
      });
    };

    const { pageContentRef, hanldeSearchBtnClick, hanldeResetBtnClick } =
      usePageSearch();
    const { modalInfo, pageModalRef, handleNewData, handleEditorRow } =
      usePageModal(undefined, editCallback);

    const otherInfo = ref({});
    const entireMenus = computed(() => store.state.entireMenus);
    const handleCheckChange = (data1: any, data2: any) => {
      const checkedKeys = data2.checkedKeys;
      const halfCheckedKeys = data2.halfCheckedKeys;
      const menuList = [...checkedKeys, ...halfCheckedKeys];
      otherInfo.value = { menuList };
    };
    // const pageContentRef = ref<InstanceType<typeof pageContent>>();
    // // 查询
    // const hanldeSearchBtnClick = (searchInfo: any) => {
    //   pageContentRef.value?.getPageData(searchInfo);
    // };
    // // 重置
    // const hanldeResetBtnClick = () => {
    //   pageContentRef.value?.getPageData();
    // };
    return {
      pageContentRef,
      searchFormConfig,
      contentTableConfig,
      pageModalRef,
      modalConfig,
      modalInfo,
      entireMenus,
      otherInfo,
      elTreeRef,
      handleCheckChange,
      handleNewData,
      handleEditorRow,
      hanldeSearchBtnClick,
      hanldeResetBtnClick,
    };
  },
});
</script>

<style scoped lang="less">
.tree {
  margin-left: 35px;
}
</style>
